<template>
    <div class="login">
        <div>
            <el-form :model="data.form" class="login-form" ref="formRef" :rules="data.rules" label-width="150px"
                style="width: 500px;">
                <div class="login-title">
                    <img src="@/assets/picture/养老金.png" alt="logo" class="login-logo">
                    欢迎注册唐山市养老保险网站
                </div>
                <el-form-item label="企业名称 " :label-width="formLabelWidth" prop="enterpriseName">
                    <el-input v-model="data.form.enterpriseName"></el-input>
                </el-form-item>
                <el-form-item label="企业地址 " :label-width="formLabelWidth" prop="enterpriseAddress">
                    <el-input v-model="data.form.enterpriseAddress"></el-input>
                </el-form-item>
                <el-form-item label="统一社会信用代码 " :label-width="formLabelWidth" prop="taxNumber">
                    <el-input v-model="data.form.taxNumber"></el-input>
                </el-form-item>
                <el-form-item label="法定代表人姓名 " :label-width="formLabelWidth" prop="bossName">
                    <el-input v-model="data.form.bossName"></el-input>
                </el-form-item>
                <el-form-item label="法定代表人身份证号 " :label-width="formLabelWidth" prop="idNumber">
                    <el-input v-model="data.form.idNumber"></el-input>
                </el-form-item>
                <el-form-item label="法定代表人手机号 " :label-width="formLabelWidth" prop="phone">
                    <el-input v-model="data.form.phone" autocomplete="off" />
                </el-form-item>
                <el-form-item label="账号 " :label-width="formLabelWidth" prop="username">
                    <el-input v-model="data.form.username"></el-input>
                </el-form-item>
                <el-form-item label="登录密码 " :label-width="formLabelWidth" prop="password">
                    <el-input v-model="data.form.password" type="password" show-password></el-input>
                </el-form-item>
                <el-form-item label="确认密码 " :label-width="formLabelWidth" prop="confirmedpassword">
                    <el-input v-model="data.form.confirmedpassword" type="password" show-password></el-input>
                </el-form-item>
                <div class="login-button">
                    <el-button @click="register()">注册</el-button>

                </div>
                <div class="register-button">
                    已有账号？ 请<a href="/login">登录</a>
                </div>
            </el-form>
        </div>
    </div>

</template>
<script setup>
import request from '@/utils/request';
import { reactive, ref } from 'vue';


const validatePass = ( rule,value, callback) => {//确认密码的校验规则
  if (value === '') {
    callback(new Error('请再次输入密码'))
  } else if (value !== data.form.password) {
    callback(new Error("两次输入的密码不一致"))
  } else {
    callback()
  }
}
const data = reactive({
    form: {
        enterpriseId: '',
        enterpriseAddress: '',
        bossName: '',
        phone: '',
        idNumber: '',
        taxNumber: '',
        enterpriseName: '',
        username: '',
        password: '',
        confirmedpassword: '',
    },
    
    rules: {
        enterpriseName: [
            { required: true, message: '请输入企业名称', trigger: ['change', 'blur'] },
            { max: 20, message: '企业名称长度在20个字符以内', trigger: ['change', 'blur'] }
        ],
        enterpriseAddress: [
            { required: true, message: '请输入企业地址', trigger: ['change', 'blur'] },
            { max: 50, message: '企业地址长度在50个字符以内', trigger: ['change', 'blur'] }
        ],
        taxNumber: [
            { required: true, message: '请输入统一社会信用代码', trigger: ['change', 'blur'] },
            { pattern: /^[1-9ANY][1-59]1302\d{2}[0-9A-Z]{10}$/, message: '请输入正确的统一社会信用代码', trigger: ['change', 'blur'] }
        ],
        bossName: [
            { required: true, message: '请输入法定代表人姓名', trigger: ['change', 'blur'] },
            { min: 2, max: 10, message: '法定代表人姓名长度在2到10个字符之间', trigger: ['change', 'blur'] }
        ],
        idNumber: [
            { required: true, message: '请输入法定代表人身份证号', trigger: ['change', 'blur'] },
            { pattern: /^[0-9]{17}[0-9X]$/, message: '法定代表人身份证号必须为18位数字或字母X', trigger: ['change', 'blur'] }
        ],
        phone: [
            { required: true, message: '请输入法定代表人手机号', trigger: ['change', 'blur'] },
            { pattern: /^1[3-9]\d{9}$/, message: '法定代表人手机号格式不正确', trigger: ['change', 'blur'] }
        ],
        username: [
            { required: true, message: '请输入账号', trigger: ['change', 'blur'] },
            { pattern: /^[A-Za-z0-9]{6,10}$/, message: '请输入有效的账号', trigger: ['change', 'blur'] }
        ],
        password: [
            { required: true, message: '请输入密码', trigger: ['change', 'blur'] },
            { pattern: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[A-Za-z\d.@]{6,20}$/, message: '密码必须为6-20位，包含大小写字母和数字，可以包含.和@', trigger: ['change', 'blur'] }
        ],
        confirmedpassword: [
            { required: true, message: '请再次输入密码', trigger: ['change', 'blur'] },
            { validator: validatePass, trigger:  'blur'},   
        ],
    }
})
const formRef = ref()



const register = () => {
    formRef.value.validate((valid) => {
        if (valid) {
                // 发送注册请求
                request.post('/enterprise/register', data.form).then(res => {
                    if (res.code == 200) {
                        // 注册成功，跳转到首页
                        ElMessage.success('注册成功')
                        //存储后台返回的企业用户
                        localStorage.setItem('enterprise', JSON.stringify(res.data))
                        router.push('/home/homepage')
                    } else {
                        // 登录失败，提示错误信息
                        ElMessage.error(res.message)
                    }
                })

        } else {
            return false
        }
    })

}
</script>
<style scoped></style>